<template>
  <div class="MonthSales">
    <EchartBox title-name="完成销售目标" tip="完成销售目标75%" num-value="75%">
      <template #picture>
        <img
          src="../img/1689133892948.png"
          alt=""
          class="absolute top-50px right-20px"
        />
      </template>
    </EchartBox>
  </div>
</template>

<script setup>
import EchartBox from './echartBox.vue'
</script>

<style scoped lang="scss" name="salesTargets">
.MonthSales {
  height: 100%;
  .data {
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    position: relative;
    margin: 0 5px;
  }
  .data-up {
    border-bottom-color: red;
    border-top-color: transparent;
    top: -11px;
  }
  .data-down {
    border-bottom-color: transparent;
    border-top-color: rgb(75, 198, 128);
    top: 11px;
  }
  .content {
    @apply flex items-center text-15px mx-10px color-#999;
  }
}
</style>
